﻿<!DOCTYPE html>
<html>
<head>
    <title>Event Test</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <style>
        #test {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            background-color: green;
        }

         
    </style>
</head>
<body style="text-align: center; font-family: Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif'; background-color: black; color: white;height: 1000px;">
    <div id="test" style="width: 280px; height: 200px; margin: 0 auto; line-height: 200px; font-size: 30px;">Touch Me</div>
    <div id="result" style="font-size: 18px;"></div>
    <script src="../../alloy_finger.js"></script>
    <div>
        <script>

            var result = document.querySelector("#result"),
                testDiv = document.querySelector("#test"),
                html = "";

            new AlloyFinger(testDiv, {
                touchStart: function () {
                    html = "";
                    html += "start<br/>";
                    result.innerHTML = html;
                 
                },
                touchEnd: function () {
                    html += "end<br/>";
                    result.innerHTML = html;
                 
                },
                tap: function () {
                    html += "tap<br/>";
                    result.innerHTML = html;
                },
                rotate: function (evt) {
                    html += "rotate [" + evt.angle + "]<br/>";
                    result.innerHTML = html;
                },
                pinch: function (evt) {
                    html += "pinch [" + evt.scale + "]<br/>";
                    result.innerHTML = html;
                },
                pressMove: function (evt) {
                    html += "pressMove [" + evt.deltaX.toFixed(4) + "|" + evt.deltaY.toFixed(4) + "]<br/>";
                    result.innerHTML = html;
                },
                swipe: function (evt) {
                    html += "swipe [" + evt.direction+"]<br/>";
                    result.innerHTML = html;
                },
                twoFingerPressMove: function (evt) {
                    html += "twoFingerPressMove [" + evt.deltaX.toFixed(4) + "|" + evt.deltaY.toFixed(4) + "]<br/>";
                    result.innerHTML = html;
                    evt.preventDefault();
                }
            })


        </script>
    </div>
</body>
</html>
